<template>
    <div class="fill">
        <el-container class="fill" style="background-color: #FFFFFF;">
            <el-header class="text_center" style="">
                <h4 class="apply_title_explain">请填写您的发票信息</h4>
            </el-header>
            <el-main style="padding: 20px;">
                <el-form class="apply_form" label-width="8.75rem" style="width: 35rem;margin: 0 auto;">
                    <div style="color: #FF0000;margin-bottom: 20px;text-align: center;">
                        发票上需要提供银行信息及地址的请开企业专票
                    </div>
                    <el-form-item class="text_l" label="发票类型：">
                        <el-radio v-model="createForm.invoiceType" label="0">个人发票</el-radio>
                        <el-radio v-model="createForm.invoiceType" label="1">企业普票</el-radio>
                        <el-radio v-model="createForm.invoiceType" label="2">企业专票</el-radio>
                    </el-form-item>
                    <div style="height: 20px;"></div>

                    <div class="myblock">
                        <p class="block-title">发票信息</p>
                        <el-form-item class="text_l" label="名 称：">
                            <el-input v-model.trim="createForm.invoiceTitle" :disabled="String.isEmptyOrNUll(createForm.invoiceType)">
                                <el-button title="去爱企查" @click="qichacha" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="createForm.invoiceType==2||createForm.invoiceType==1" class="text_l" label="纳税人识别号：">
                            <el-input v-model.trim="createForm.taxRegistryNo"></el-input>
                        </el-form-item>
                        <p v-if="createForm.invoiceType==1" style="margin-bottom: 10px;color: #0B67D0;cursor: pointer;text-align: center;"
                            @click="puInvoice=!puInvoice">{{!puInvoice? "更多" : "收起"}}</p>
                        <el-form-item v-if="createForm.invoiceType==2||puInvoice" class="text_l" label="开户行及账号：">
                            <div>
                                <el-col :span="12">
                                    <el-input v-model.trim="createForm.invoiceBank" placeholder="请输入开户行"></el-input>
                                </el-col>
                                <el-col :span="12">
                                    <el-input v-model.trim="createForm.invoiceAccount" placeholder="请输入账户"></el-input>
                                </el-col>
                            </div>
                            
                        </el-form-item>
                        <el-form-item v-if="createForm.invoiceType==2||puInvoice" class="text_l" label="地 址、电 话：">
                            <el-col :span="12">
                                <el-input v-model.trim="createForm.invoiceAddress" placeholder="请输入地址"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model.trim="createForm.invoicePhone" placeholder="请输入电话"></el-input>
                            </el-col>
                        </el-form-item>
                    </div>

                    <div class="myblock" v-if="createForm.invoiceType==2">
                        <p class="block-title">收获地址信息</p>
                        <el-form-item v-if="createForm.invoiceType==2" class="text_l" label="发票收货人：">
                            <el-input v-model.trim="createForm.mailingConsignee"></el-input>
                        </el-form-item>
                        <el-form-item v-if="createForm.invoiceType==2" class="text_l" label="发票收货人电话：">
                            <el-input v-model.trim="createForm.mailingConsigneephone"></el-input>
                        </el-form-item>
                        <el-form-item v-if="createForm.invoiceType==2" class="text_l" label="发票收货地址：">
                            <el-input v-model.trim="createForm.mailingAddress"></el-input>
                        </el-form-item>
                    </div>
                    


                </el-form>
                <div class="text_center" style="margin-top: 20px;">
                    <el-button plain @click="closeDialog" size="medium">返回</el-button>
                    <el-button type="primary" @click="completeSave" size="medium">保存</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    var _this;
    export default {
        data() {
            return {
                puInvoice: false,
                createForm: {
                    invoiceTitle: "",
                    taxRegistryNo: "", //税务登记证号
                    invoiceBank: "",   //银行
                    invoiceAccount: "", //银行账户
                    invoiceAddress: "", //地址
                    invoicePhone: "", // 电话
                    mailingConsignee: "", //收货人姓名
                    mailingConsigneephone: "",  //收获人电话
                    mailingAddress: "",  //邮寄地址
                    invoiceType: "1"
                }
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {},
        methods: {
            closeDialog: function() {
                this.$emit("closeDialog", true);
            },
            completeSave: function() {
                if (parseInt(this.createForm.invoiceType) == 0) {
                    if (this.createForm.invoiceTitle == "") {
                        this.$message.error("请填写名称！");
                        return;
                    }
                }
                if (parseInt(this.createForm.invoiceType) == 1) {
                    if (this.createForm.invoiceTitle == "") {
                        this.$message.error("请填写名称！");
                        return;
                    }
                    if (this.createForm.taxRegistryNo == "") {
                        this.$message.error("请填写纳税人识别号！");
                        return;
                    }
                }
                if (parseInt(this.createForm.invoiceType) == 2) {
                    if (this.createForm.invoiceTitle == "") {
                        this.$message.error("请填写名称！");
                        return;
                    }
                    if (this.createForm.taxRegistryNo == "") {
                        this.$message.error("请填写纳税人识别号！");
                        return;
                    }
                    if (this.createForm.invoiceBank == "" || this.createForm.invoiceAccount == "") {
                        this.$message.error("请填写开户行及账号！");
                        return;
                    }
                    if (this.createForm.invoiceAddress == "" || this.createForm.invoicePhone == "") {
                        this.$message.error("请填写地 址、电 话！");
                        return;
                    }
                    if(this.createForm.mailingConsigneephone.length!=11){
                        this.$message.error("请填写手机号码！");
                        return;
                    }
                    if (this.createForm.mailingAddress == "" || this.createForm.mailingConsignee == "" || this.createForm.mailingConsigneephone == "") {
                        this.$message.error("请填写收货地址及号码！");
                        return;
                    }
                }
                this.common.post(this.api.saveInvoiceTemp, this.createForm, function(res) {
                    _this.closeDialog();
                });
            },
            qichacha: function() {
                if (String.isEmptyOrNUll(this.createForm.invoiceTitle)) {
                    this.$message.error('请填写公司名称');
                    return;
                }
                var url = 'https://aiqicha.baidu.com/s?q=' + this.createForm.invoiceTitle;
                window.open(url);
            }
        }
    }
</script>

<style>
    .myblock{
        border: 1px solid rgb(180, 180, 180);
        border-radius: 5px;
        padding: 10px;
        position: relative;
        margin-bottom: 30px;
    }
    .block-title{
        position: absolute;
        font-size: 18px;
        top: -12px;
        left: 18px;
        background: #fff;
        font-weight: 700;
        padding: 0 10px;
    }
    .myblock .el-input__inner {
        margin-top: 0 !important;
    }
</style>
